<template>
  <div>
    <jxf-titletip :title="title" :hasGoBack="true" :hasRefresh="false"
                  @goBack="$emit('update:isAdd', false)"></jxf-titletip>
    <el-card class="mt20">
      <div slot="header">
        <span>添加分类</span>
      </div>
      <el-form label-position="right" ref="info" :rules="rules" :model="info" label-width="110px">
        <el-form-item label="分类名称:" prop="classifyName">
          <el-input v-model="info.classifyName"></el-input>
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-input v-model="info.sort" ></el-input>
          <span class="c-gray">（数字越小排序越靠前，重复数字以最新录入为准）</span>
        </el-form-item>
        <el-form-item label="是否启用:" prop="isEnable">
          <el-radio v-model="info.isEnable" :label="1">是</el-radio>
          <el-radio v-model="info.isEnable" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="分类描述:" prop="remark">
          <el-input type="textarea" v-model="info.remark"
                    :autosize="{ minRows: 3, maxRows: 5}"></el-input>
        </el-form-item>
      </el-form>
      <div class="footer text-center">
        <el-button type="primary" @click="onSubmit('info')">提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "AddFirstClassify",
    props: {
      isAdd: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        title: "添加分类",
        infoBack: {
          classifyName :"",
          isEnable:1,
          sort :"",
          remark :""
        },
        info: {
          classifyName :"",
          isEnable:1,
          sort :"",
          remark :""
        },
        rules: {
          classifyName : [
            {required: true, message: '请输入分类名称', trigger: 'blur'},
            {validator: validate.length15, trigger: 'change'}
          ],
          sort: [{validator: validate.pInteger, trigger: 'change'}],
          remark: [{validator: validate.length150, trigger: 'change'}]
        }
      }
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.insertClassify()
          }
          else {
            return false;
          }
        });
      },
      // 获取商品分类
      insertClassify() {
        ajax.post(apis.productType.insertFirstClassify, this.info)
          .then(res => {
            if (res.success === true) {
              this.info = {...this.infoBack}
              this.$emit("update:isAdd",false)
              this.$emit("getList")
              this.$message({
                message: res.message,
                type: 'success'
              });
            }else{
              this.$message({
                message: res.message,
                type: 'error'
              });
            }
          })
      }
    },
    created() {

    }
  }
</script>

<style lang="scss" scoped>
.el-form{
  max-width: 460px;
  margin: auto;
}
</style>
